import * as echarts from 'echarts';

// 学习进度柱状图模块
function barFunction(bar, typeDetail) {
    if (typeDetail === undefined || typeDetail.typeAndMoney.length === 0) {
        echarts.init(bar).dispose()
        return;
    }
    let data = [];
    let titlename = [];
    let valdata = [];
    let myColor = []
    let myColorInsert = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    typeDetail.typeAndMoney.map((item, index) => {
        titlename.push(item.type)
        valdata.push(item.money)
        data.push(Math.round(item.money / typeDetail.MonthMoney * 100))
        myColor.push(myColorInsert[index])
    })

    let myChart
    if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();//销毁
    }
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(bar);


    let option = {
        //图标位置
        grid: {
            top: "2%",
            left: "20%",
            bottom: "10%",
            right: '20%'
        },
        xAxis: {
            show: false
        },
        yAxis: [
            {
                show: true,
                data: titlename,
                inverse: true,

                // 分割线
                splitLine: {
                    show: false
                },
                // 坐标轴刻度
                axisTick: {
                    show: false
                },
                // 坐标轴线
                axisLine: {
                    show: false,
                    onZero: false
                },
                offset: 0,
                axisLabel: {
                    color: "black",
                    fontSize: 14,
                }
            },
            {
                show: true,
                inverse: true,
                data: valdata,

                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    onZero: false
                },
                // 偏移量，配合上面的onZero:false才能使用
                offset: -5,
                axisLabel: {
                    color: "black",
                    fontSize: 14,
                }
            },
        ],
        series: [
            {
                name: "条",
                type: "bar",
                yAxisIndex: 0,
                data: data,
                barCategoryGap: '10%',
                barWidth: 15,
                itemStyle: {
                    borderRadius: 20,
                    color: function (params) {
                        var num = myColor.length;
                        return myColor[params.dataIndex % num];
                    }
                },
                label: {
                    show: true,
                    position: "inside",
                    formatter: "{c}%"
                }
            },
            {
                name: "框",
                type: "bar",
                yAxisIndex: 1,
                barCategoryGap: '10%',
                data: [100, 100, 100, 100, 100],
                barWidth: 15,
                itemStyle: {
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 3,
                    borderRadius: 15
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

function barFunction2(bar, dataAll) {
    if (dataAll == undefined) {
        echarts.init(bar).dispose()
        return;
    }
    const data = dataAll
    let myChart
    if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();//销毁
    }
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(bar);
    let option = {
        color: ["#2f89cf"],
        tooltip: {
            trigger: "none",
            // axisPointer: {
            //     // 坐标轴指示器，坐标轴触发有效
            //     type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            // }
        },
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        xAxis: [
            {
                type: "category",
                data: [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月",
                    "8月",
                    "9月",
                    "10月",
                    "11月",
                    "12月",
                ],
                axisTick: {
                    alignWithLabel: true
                },
                axisLabel: {
                    color: "rgba(0,0,0,.6)",
                    fontSize: "12"
                },
                axisLine: {
                    show: false
                }
            }
        ],
        yAxis: [
            {
                type: "value",
                axisLabel: {
                    color: "rgba(0,0,0,.6)",
                    fontSize: "12"
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(0,0,0,.1)"
                        // width: 1,
                        // type: "solid"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(0,0,0,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: "直接访问",
                type: "bar",
                barWidth: "35%",
                // data: [0,0,0,0,0,0,0,0,0,0,0,0],
                data: data,
                itemStyle: {
                    borderRadius:{
                        barBorderRadius: 5
                    }
                    
                },
                label: {
                    formatter: "{b}:{c}¥"
                },
            }
        ]
    };

    // 把配置给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    })
}

function pieFunction(pie, typeDetail) {
    if (typeDetail === undefined || typeDetail.typeAndMoney.length === 0) {
        echarts.init(pie).dispose()
        return;
    }
    let data = [];
    let myColor = []
    let myColorInsert = [
        "#006cff",
        "#60cda0",
        "#ed8884",
        "#ff9f7f",
        "#0096ff",
        "#9fe6b8",
        "#32c5e9",
        "#1d9dff"
    ];

    typeDetail.typeAndMoney.map((item, index) => {
        data.push({
            value: item.money, name: item.type
        })
        myColor.push(myColorInsert[index])
    })
    let myChart
    if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();//销毁
    }
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(pie);
    // 2. 指定配置项和数据
    var option = {
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(0,0,0,.5)",
                fontSize: "12"
            }
        },
        tooltip: {
            trigger: "none",
            // formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 注意颜色写的位置
        color: myColor,
        series: [
            {
                name: "类型金额",
                type: "pie",
                // 如果radius是百分比则必须加引号
                radius: ["10%", "55%"],
                center: ["50%", "42%"],
                roseType: "radius",
                data: data,
                // 修饰饼形图文字相关的样式 label对象
                label: {
                    fontSize: 12,
                    formatter: "{b}:{c}¥"
                },
                // 修饰引导线样式
                labelLine: {
                    // 连接到图形的线长度
                    length: 10,
                    // 连接到文字的线长度
                    length2: 8
                }
            }
        ]
    };

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
}

function lineFunction(line, val) {
    if (val.length === 0) {
        echarts.init(line).dispose()
        return;
    }

    let myChart
    if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose();//销毁
    }
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(line);

    // 2.指定配置
    var option = {
        // 通过这个color修改两条线的颜色
        // color: ["#00f2f1", "#ed3f35"],
        color: ["#60cda0", "#006cff"],
        tooltip: {
            trigger: "none"
        },
        legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            // 修改图例组件 文字颜色
            textStyle: {
                color: "black"
            },
            // 这个10% 必须加引号
            right: "10%",
            top: "2%"
        },
        grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: true, // 显示边框
            borderColor: "#02a6b5", // 边框颜色
            containLabel: true // 包含刻度文字在内
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月"
            ],
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: "black",
            },
            axisLine: {
                show: false // 去除轴线
            }
        },
        yAxis: {
            type: "value",
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: "black",
            },
            axisLine: {
                show: false // 去除轴线
            },
            splitLine: {
                lineStyle: {
                    color: "#02a6b5" // 分割线颜色
                }
            }
        },
        series: val.map(item => {
            return {
                name: item.year,
                type: "line",
                // true 可以让我们的折线显示带有弧度
                smooth: true,
                data: item.data
            }
        })


    };


    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}


export { barFunction, barFunction2, pieFunction, lineFunction }